// import { View, Text, Canvas, WebView } from '@tarojs/components'
// import { useDidShow, useLoad } from '@tarojs/taro'
// import { useRef } from 'react';
// import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
// import echarts from './echarts.js';
// import './index.scss'

// // const  echarts = require('./echarts.esm.js');

// export default function Index() {
//   // 基于准备好的dom，初始化echarts实例
//   const echartsRef = useRef<EchartsHandle>(null)
//   const option: EChartOption = {
//     title: {
//       text: ''
//     },
//     tooltip: {
//       trigger: 'axis',
//       axisPointer: {
//         type: 'cross',
//         label: {
//           backgroundColor: '#6a7985'
//         }
//       }
//     },
//     legend: {
//       data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
//     },
//     toolbox: {
//       feature: {
//         saveAsImage: {}
//       }
//     },
//     grid: {
//       left: '3%',
//       right: '4%',
//       bottom: '3%',
//       containLabel: true
//     },
//     xAxis: [
//       {
//         type: 'category',
//         boundaryGap: false,
//         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//       }
//     ],
//     yAxis: [
//       {
//         type: 'value'
//       }
//     ],
//     series: [
//       {
//         name: 'Email',
//         type: 'line',
//         stack: 'Total',
//         areaStyle: {},
//         emphasis: {
//           focus: 'series'
//         },
//         data: [120, 132, 101, 134, 90, 230, 210]
//       },
//       {
//         name: 'Union Ads',
//         type: 'line',
//         stack: 'Total',
//         areaStyle: {},
//         emphasis: {
//           focus: 'series'
//         },
//         data: [220, 182, 191, 234, 290, 330, 310]
//       },
//       {
//         name: 'Video Ads',
//         type: 'line',
//         stack: 'Total',
//         areaStyle: {},
//         emphasis: {
//           focus: 'series'
//         },
//         data: [150, 232, 201, 154, 190, 330, 410]
//       },
//       {
//         name: 'Direct',
//         type: 'line',
//         stack: 'Total',
//         areaStyle: {},
//         emphasis: {
//           focus: 'series'
//         },
//         data: [320, 332, 301, 334, 390, 330, 320]
//       },
//       {
//         name: 'Search Engine',
//         type: 'line',
//         stack: 'Total',
//         label: {
//           show: true,
//           position: 'top'
//         },
//         areaStyle: {},
//         emphasis: {
//           focus: 'series'
//         },
//         data: [820, 932, 901, 934, 1290, 1330, 1320]
//       }
//     ]
//   };
//   const initChart = () => {
//     // const ctx = Taro.createCanvasContext('main');
//     // const chart = echarts.init(ref.current);
//     // option && chart.setOption(option);
//   }
  
//   useLoad(() => {
//     console.log('Page loaded.');
//   })
//   useDidShow(() => {
//     console.log('Page show.');
//     // initChart();
//   })
//   // return (
//   //   <View className='page relative flex flex-col overflow-hidden h-screen bg-[rgba(143,201,255,0.78)]' style={{ paddingTop: 64 }}>
//   //     <View>
//   //       疾控数据
//   //     </View>
//   //     <View className='flex-1'>
//   //       <WebView 
//   //       // style={{
//   //       //   height: '600px !important'
//   //       // }}
//   //        src='https://baidu.com' />
//   //     </View>
//   //   </View>
//   // )

//   return (
//     <View className='page min-h-screen bg-[rgba(143,201,255,0.78)] pt-16' style={{ paddingTop: 64 }}>
//       <View>疾控数据描述</View>
//       <View style={{width: '100%', height: '600rpx' }}>
//         <Echarts
//           echarts={echarts}
//           option={option}
//           ref={echartsRef}
//           // isPage={false}
//           // style自定义设置echarts宽高
//           style={{width: '100%', height: '100%'}} 
//         />
//       </View>
//     </View>
//   )
// }
import { Text, View} from '@tarojs/components'
import Taro, { useDidShow, useLoad } from '@tarojs/taro'
import { useWebStore } from '@/store/web';
// const  echarts = require('./echarts.esm.js');
import './index.scss'

export default function Index() {
  const { setUrl } = useWebStore()
  useLoad(() => {
    console.log('Page loaded.');
  })
  useDidShow(() => {
    console.log('Page show.');
    // initChart();
  })
  const list = [
    'https://www.ndcpa.gov.cn/jbkzzx/c100016/common/content/content_1695998420130852864.html',
    'https://www.ndcpa.gov.cn/jbkzzx/c100016/common/content/content_1706568814483075072.html',
    'https://www.ndcpa.gov.cn/jbkzzx/c100016/common/content/content_1716605249416196096.html',
    'https://www.ndcpa.gov.cn/jbkzzx/c100016/common/content/content_1725494140437131264.html',
    'https://www.ndcpa.gov.cn/jbkzzx/c100016/common/content/content_1739453479981600768.html',
    'https://www.ndcpa.gov.cn/jbkzzx/c100016/common/content/content_1746766719346462720.html',
    'https://www.ndcpa.gov.cn/jbkzzx/c100016/common/content/content_1770302255702646784.html',
    'https://www.ndcpa.gov.cn/jbkzzx/c100016/common/content/content_1769982157846650880.html'
  ];
  const onClickItem = (item: any) => {
    setUrl(item)
    Taro.navigateTo({
      url: '/package-home/pages/WebView/index'
    })
  }

  return (
    <View className='page min-h-screen bg-[rgba(143,201,255,0.78)] pt-16' style={{ paddingTop: 64 }}>
      <View className='px-3 pb-[186px]'>
        <View className='header flex flex-row items-center justify-center relative w-full px-6'>
          <Text className='text-[40px]'>
            疾控数据
          </Text>
        </View>
        <View className='mt-4'>
          {
            (list.reverse()).map((item, index) => {
              return (
                <View key={index} onClick={() => onClickItem(item)} className='item' />
              )
            })
          }
        </View>
      </View>
    </View>
  )
}
